デカルト軸

デカルト グリッドに従う軸は、「デカルト軸」として知られています。デカルト軸は、折れ線グラフ、棒グラフ、バブル チャートに使用されます。 Chart.js にはデフォルトで 4 つのデカルト軸が含まれています。

• 線形
• 対数
• カテゴリー
• 時間

共通構成

含まれているデカルト軸はすべて、多くの一般的なオプションをサポートしています。

ティック設定

次のオプションはすべてのデカルト軸に共通ですが、他の軸には適用されません。

軸ID

プロパティdataset.xAxisIDまたdataset.yAxisIDスケールのプロパティを一致させる必要がありますscales.xAxes.idまたscales.yAxes.id。これは、多軸チャートを使用する場合に特に必要です。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // This dataset appears on the first axis
            yAxisID: 'first-y-axis'
        }, {
            // This dataset appears on the second axis
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            yAxes: [{
                id: 'first-y-axis',
                type: 'linear'
            }, {
                id: 'second-y-axis',
                type: 'linear'
            }]
        }
    }
});

複数の軸の作成

デカルト軸を使用すると、複数の X 軸と Y 軸を作成できます。これを行うには、複数の構成オブジェクトをxAxesとyAxesプロパティ。新しい軸を追加するときは、デフォルトのタイプが次のとおりであるため、新しい軸のタイプを必ず指定することが重要です。いいえこの場合に使用されます。

以下の例では、2 つの Y 軸を作成しています。次に、yAxisIDプロパティを使用して、データセットを正しい軸にマップします。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',

            // This binds the dataset to the left y axis
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',

            // This binds the dataset to the right y axis
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            yAxes: [{
                id: 'left-y-axis',
                type: 'linear',
                position: 'left'
            }, {
                id: 'right-y-axis',
                type: 'linear',
                position: 'right'
            }]
        }
    }
});